<template>
	<section>
		<el-row>
  			<el-col :span="24">
	  			<div v-loading="loading" class="grid-content bg-purple">
					<el-menu >
						<el-menu-item index="1">专家 I D：<span>{{userinfo.id}}</span></el-menu-item>
						<el-menu-item index="2">专家昵称：<span>{{userinfo.username}}</span></el-menu-item>
						<el-menu-item index="3">真实姓名：
							<span v-if='changename' @click='changename=false' class="wage">{{userinfo.realName}}</span>
							<input v-else class="wage inputname" type="text" @keydown="affirmchangname($event)" @blur="blurchangename()"  v-model='userinfo.realName'>
						</el-menu-item>
						<el-menu-item index="4">专家性别：<span>{{userinfo.sex==0?"未知":"userinfo.sex==1?'男':'女'"}}</span></el-menu-item>
						<el-menu-item index="5">专家手机：
							<span v-if='changephone' @click='changephone=false'  class="wage">{{userinfo.phone==""?"暂无手机号":userinfo.phone}}</span>
							<input v-else @keydown="affirmchangephone($event)" @blur="blurchangephone()" class="wage inputphone" type="text" v-model='userinfo.phone'>
						</el-menu-item>
						<el-menu-item index="6">鉴定品类：
							<span>{{userinfo.name}}</span>
							<el-button type="small" @click='getcategorydata' class="mobutton" plain>修改品类</el-button>
						</el-menu-item>
						<el-menu-item index="7">分佣比例: 
							<span v-if='changeWage' @click='changeWage=false' class="wage" >{{userinfo.wage}}</span>
							<input v-else class="wage inputwage" @keydown="enrterchangewage($event)" @blur="blurchangewage()" autofocus="autofocus" type="text" v-model='userinfo.wage'>
						</el-menu-item>
						<el-menu-item index="8">鉴定次数：<span>{{userinfo.count}}</span></el-menu-item>
					</el-menu>
		  		</div>
  			</el-col>
		</el-row>
		<!--更改专家鉴定品类弹窗 -->
		<el-dialog title="修改专家鉴定品类" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
			<el-checkbox-group v-model='checkList'  @change="handleCheckedCitiesChange">
				<el-checkbox v-for="cate in cateList" :label="cate">{{cate.name}}</el-checkbox>
			</el-checkbox-group>
			<span slot="footer" class="dialog-footer">
			    <el-button @click="dialogVisible = false">取 消</el-button>
			    <el-button type="primary" @click="confirmClassUnverified">确 定</el-button>
			</span>
		</el-dialog>
	</section>
</template>
<script>
import util from '../../common/js/util'
import { sendData,cutString  } from "../../api/api";
	export default {
		data(){
			return {
				loading:false,
				userinfo:[],
				dialogVisible:false,
				changeWage:true,
				changephone:true,
				changename:true,
				wage:"",
				realName:"",
				phone:"",
				classfyID:[],
				changecateList:[],
				cateList:[],
				checkList:[]
			}
		},
		methods:{
			getbaseinfo(){
				 let id=Number(sessionStorage.getItem("sp_ID"))
				 this.loading=true
				let params=sendData({url: "export/info",msg: {id:id}})
				this.$http.get(params.baseURL,{params:params.params}).then(res=>{
				var res=cutString(res.bodyText)
				console.log(res)
				this.userinfo=res.msg
				sessionStorage.setItem("sp_name",res.msg.realName)
				this.wage=res.msg.wage
				this.realName=res.msg.realName
				this.phone=res.msg.phone
				this.classfyID=res.msg.classfyIdList
				this.loading=false
				})
			},
			// 改变专家信息弹框显示并请求鉴赏品类数据
			getcategorydata(){
				this.dialogVisible=true
				let params=sendData({url:"classfy/list",msg:{}})
				this.$http.get(params.baseURL, { params: params.params }).then(res=>{
					var res = cutString(res.bodyText);
					console.log(res)
					this.cateList=res.msg
				})
			},
			// 获取重新选定的鉴定品类
			handleCheckedCitiesChange(val){
				// console.log(val)
				let arr=[]
				val.map(function(v,i){
					arr.push(v.id)
				})
				this.userinfo.classfyIdList=arr
			},
			// 确认修改专家鉴定品类--未验证是否修改
			confirmClassUnverified(){
				this.verifyclassSet()
				},
			// 确认是否更改品类设置
			verifyclassSet(){
				var primary=0,after=0
				for(let k in this.classfyID){
					primary+=Number(this.classfyID[k])
				}
				for(let k in this.userinfo.classfyIdList){
					after+=Number(this.userinfo.classfyIdList[k])
				}
				if (primary==after) {
					this.$confirm('您没有修改专家的鉴定品类, 是否继续修改?', '提示', {
			       	confirmButtonText: '继续',
			        cancelButtonText: '取消',
			        type: 'warning'
			        }).then(() => {
			          this.$message({
			            type: 'success',
			            message: '请继续修改专家鉴定品类!'
			          });
			        }).catch(() => {
			        this.dialogVisible=false	
			          this.$message({
			            type: 'info',
			            message: '已取消修改'
			          });          
			        });
				}else{
					this.dialogVisible=false
					this.changeinfo()
				}
			},
			//改变专家信息X关闭
			handleClose(done) {
		        this.$confirm('确认关闭？')
		          .then(_ => {
		            done();
		          })
		          .catch(_ => {});
		      },

		      // 回车确认更改专家姓名
		      affirmchangname(ev){
					if(ev.keyCode==13){

						this.verifyName()
	            	}
		      },
		      // 失去焦点更改专家姓名
		      blurchangename(){
		 //      	this.verifyName()
			},
			// 验证是否修改姓名
			verifyName(){
				if (this.realName==this.userinfo.realName) {
						this.changename=true
						this.$message.warning('专家真实姓名您未做任何修改')
						return
				}else{
					this.changename=true
					this.changeinfo()
				}
			},
			 // 回车确认更改专家手机号码
		      affirmchangephone(ev){
					if(ev.keyCode==13){
		              this.verifyPhone()
		            }
		      	},
		      // 失去焦点更改专家手机号码
		      blurchangephone(){
				// this.verifyPhone()
			},
			// 验证手机的合法性和是否更改
			verifyPhone(){
				if (!/^[1][3,4,5,7,8][0-9]{9}$/.test(Number(this.userinfo.phone))) {
					this.$message.error('专家手机设置错误')
					return
				}else if (this.phone==this.userinfo.phone) {
						this.changephone=true
						this.$message.warning('专家手机号码您未做任何修改')
						return
				}else{
					this.changephone=true
					this.changeinfo()
				}
			},
		   // 回车确认更改专家分佣比例
			enrterchangewage(ev){
				 if(ev.keyCode==13){
		            this.verifyWage()
	            }
			},
			// 失去焦点更改专家分佣比例
			blurchangewage(){
				// this.verifyWage()
			},
			// 验证分佣比例的合法性和是否修改
			verifyWage(){
				if (this.userinfo.wage==""||Number(this.userinfo.wage)<0||Number(this.userinfo.wage)>100||isNaN(this.userinfo.wage)) {
					this.$message.error('专家分佣比例设置错误')
					return
				}else if (this.wage==this.userinfo.wage) {
					this.changeWage=true
					this.$message.warning('专家分佣比例您未做任何修改')
					return
				}else{
					this.changeWage=true
					this.changeinfo()
				}
			},
			// 改变专家信息
			changeinfo(){
					let msg={
					id:this.userinfo.id,
					classfyIds:this.userinfo.classfyIdList,
					realName:this.userinfo.realName,
					phone:this.userinfo.phone,
					wage:this.userinfo.wage
				}
				let params=sendData({url:"export/add",msg:msg})
				this.$http.get(params.baseURL, { params: params.params }).then(res=>{
					var res = cutString(res.bodyText);
					console.log(res)
					if (res.desc=="success") {
					this.getbaseinfo()
					var _this=this
					setTimeout(function(){
						_this.$confirm('专家信息修改成功')
				        .then(_ => {
				           done();
				        })
				        .catch(_ => {});
					},200)
					}
				})
			},
			
		},
		mounted() {
			this.getbaseinfo()
		}
	}
</script>
<style scoped>
.el-row {
  margin: 20px 0px;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  min-height: 36px;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.mobutton{
	margin-left: 30px;
}
.wage{
	border: 1px solid #B09356;
	padding: 5px 50px 5px 5px;
	box-sizing:border-box;
	border-radius: 3px
}
.inputwage{
	width: 73px;
	padding: 5px 0px 5px 5px!important
}
.inputphone{
	width: 142px;
	padding: 5px 0px 5px 5px!important
}
.inputname{
	width: 100px;
	padding: 5px 0px 5px 5px!important
}
</style>